<template>
  <div class="home-container">
    <div class="navbar">
      <div class="logo">学生成绩管理系统</div>
      <div class="user-info">
        <span>{{ userName }}</span>
        <span>{{ userRole }}</span>
      </div>
    </div>
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>成绩查询</span>
              </div>
            </template>
            <div>
              <!-- 成绩查询表单 -->
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>课程管理</span>
              </div>
            </template>
            <div>
              <!-- 课程管理表单 -->
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>用户管理</span>
              </div>
            </template>
            <div>
              <!-- 用户管理表单 -->
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import request from "@/requests/request.js";

// 假设从登录信息中获取用户名和角色
const userName = ref('张三')
const userRole = ref('学生')
request.post('/user/getUserInfo', userName).then(res => {
  userName.value = res.data.userName
  userRole.value = res.data.userRole
}).catch(err => {
  console.log(err)
})
// TODO: 根据实际情况获取用户信息
</script>

<style scoped>
.home-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: var(--primary-color);
  color: white;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.user-info span {
  margin-left: 10px;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.box-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>
